<template>
	<el-popover placement="bottom-start" :width="360" trigger="hover">
		<slot>
			<el-card>
				<template #header>
					<div class="card_header">
						<div>
							<el-avatar shape="square" :size="100" :src="proxy.$baseImgUrl + avatarImgUrl" />
						</div>
						<div class="hover_user_info">
							<div class="hover_name_wrap">
								<p class="text_ellipsis">{{ nickName }}</p>
								<!-- <el-button type="primary" plain style="margin-left: 4px">
									<el-icon>
										<Plus />
									</el-icon>
									<span style="margin-left: 4px">关注</span>
								</el-button> -->
							</div>
							<div class="hover_desc text_muted text_ellipsis" style="font-size: 14px">
								<template v-if="remark">
									{{ remark }}
								</template>
								<template v-else>
									这家伙很懒，什么都没留下
								</template>
							</div>
						</div>
					</div>
				</template>
				<div class="card_content">
					<el-descriptions :column="2">
						<el-descriptions-item label="发布:">{{ noteNum }}</el-descriptions-item>
						<el-descriptions-item label="获赞:">{{ likeNum }}</el-descriptions-item>
						<el-descriptions-item label="关注:">{{ followNum }}</el-descriptions-item>
					</el-descriptions>
					<el-descriptions>
						<el-descriptions-item label="兴趣:">
							<template v-if="interestValue">
								<el-tag type="info" class="tag_margin" v-for="item in interestValue.split(',')" :key="item">{{ item
								}}</el-tag>
							</template>
						</el-descriptions-item>
					</el-descriptions>
				</div>
			</el-card>
		</slot>
		<template #reference>
			<el-avatar :src="proxy.$baseImgUrl + avatarImgUrl" class="cursor_class" :size="40"
				@click="handleClickToUserBlog" />
		</template>
	</el-popover>
</template>

<script lang="ts" setup>
import router from '@/router';
import {
	Plus
} from '@element-plus/icons-vue'
import { ref, toRefs, defineProps, PropType, getCurrentInstance } from 'vue'
const { proxy } = getCurrentInstance()
const props = defineProps({
	userId: {
		type: Number,
		// default: ,
	},
	// 头像地址
	avatarImgUrl: {
		type: String,
		default: '',
	},
	// 昵称
	nickName: {
		type: String,
		default: '',
	},
	remark: {
		type: String,
		default: '',
	},
	// 兴趣
	interestValue: {
		type: String,
		default: '',
	},
	noteNum: {
		type: Number,
		default: 0
	},
	likeNum: {
		type: Number,
		default: 0
	},
	followNum: {
		type: Number,
		default: 0
	},
})
const handleClickToUserBlog = () => {
	const { userId } = props
	router.push({
		name: 'user-blog',
		params: {
			id: userId
		}
	})
}
</script>

<style lang="scss" scoped>
.card_header {
	display: flex;
	overflow: hidden;

	.hover_user_info {
		overflow: hidden;
		margin-left: 10px;
		flex: 1;

		.hover_name_wrap {
			display: flex;
			justify-content: space-between;
			margin-bottom: 8px;

			p {
				color: rgba(0, 0, 0, 0.85);
				font-weight: 600;
				font-size: 20px;
				margin-bottom: 6px;
			}
		}
	}
}

.tag_margin {
	margin: 4px;
}

.tag_margin:first-child {
	margin-left: 0;
}
</style>
